<template>
    <div class="pagestyle">
        <list_controller ref="zujianname" :options="state.options" pageName="电源">
            <template v-slot:opraCurdBtn1="row">
                <span>
                    <el-button type="primary" link size="small" @click="lookBtn(row.row.row)">查看</el-button>
                    <el-button type="primary" link size="small" @click="editBtn(row.row.row)">编辑</el-button>
                    <el-button type="primary" link size="small" @click="deleteBtn(row.row.row)">删除</el-button>
                </span>
            </template>
            <template v-slot:opraCurdBtnAll>
                <el-button class="btn" type="primary" link @click="addBtn('mul')">
                    <el-icon style="margin-right: 2px;">
                        <svg-icon class-name="search-icon" icon-class="addtotal" />
                    </el-icon>新增
                </el-button>
                <el-button class="btn" type="primary" link @click="deleteBtn('mul')">
                    <el-icon>
                        <DeleteFilled />
                    </el-icon>删除
                </el-button>
            </template>
        </list_controller>
        <!-- 新增弹框 -->
        <teleport to="body">
            <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto"
                v-model="state.addModal" resize :mask="true">
                <template #title>
                    <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
                </template>
                <template #default>
                    <div class="form_box">
                        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="电源名称" prop="powerName">
                                        <el-input v-model="state.formData.powerName" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="电源类型" prop="powerTypeName">
                                        <el-select allow-create clearable filterable v-model="state.formData.powerTypeName"
                                            placeholder="请选择">
                                            <el-option v-for="item in state.PowerTypeList" :key="item.id"
                                                :label="item.powerTypeName" :value="item.powerTypeName">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="时间门限" prop="timeThreshold">
                                        <el-select clearable filterable v-model="state.formData.timeThreshold"
                                            placeholder="请选择">
                                            <el-option v-for="item in state.TimeList" :key="item" :label="item"
                                                :value="item">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="容量门限" prop="capacityThreshold">
                                        <el-select clearable filterable v-model="state.formData.capacityThreshold"
                                            placeholder="请选择">
                                            <el-option v-for="item in state.CapacityList" :key="item" :label="item"
                                                :value="item">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div class="form_footer">
                            <el-button @click="cancel">取消</el-button>
                            <el-button type="primary" @click="submitForm">
                                确定
                            </el-button>
                        </div>
                    </div>
                </template>
            </vxe-modal>
        </teleport>
        <!-- 详情 -->
        <el-drawer v-model="state.drawerShow" direction="rtl" size="40%" close-on-click-modal :modal="true">
            <template #header="{ close, titleId, titleClass }">
                <h4 class="mask_sub_title">
                    <svg-icon class-name="search-icon" icon-class="dot" /><span>电源详情</span></h4>
            </template>
            <p class="drawer_sub_title">
                <span class="sub_title_line">基础信息</span>
            </p>
            <div>
                <el-row :gutter="20"
                    style="background: rgba(91, 109, 128, 0.04);display: flex;align-items: center;padding: 20px 0;">
                    <el-col :span="6">
                        <p>电源名称</p>
                        <p>{{state.formData.powerName}}</p>
                    </el-col>
                    <el-col :span="6">
                        <p>电源类型</p>
                        <p>{{state.formData.powerTypeName}}</p>
                    </el-col>
                    <el-col :span="6">
                        <p>时间门限</p>
                        <p>{{state.formData.timeThreshold}}小时</p>
                    </el-col>
                    <el-col :span="6">
                        <p>容量门限</p>
                        <p>{{state.formData.capacityThreshold}}</p>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:10px;">
                    <el-col :span="13">
                        <p class="drawer_sub_title">
                            <span class="sub_title_line">关联分站</span>
                        </p>
                        <vxe-table height="200" :data="state.formData.stationBasicDtoList" border="inner">
                            <vxe-column type="seq" :width="55" title="序号"></vxe-column>
                            <vxe-column title="编号" field="aree"></vxe-column>
                            <vxe-column title="名称" field="aree"></vxe-column>
                            <vxe-column title="安装地点" field="aree"></vxe-column>
                        </vxe-table>
                    </el-col>
                    <el-col :span="11">
                        <p class="drawer_sub_title">
                            <span class="sub_title_line">关联测点</span>
                        </p>
                        <vxe-table height="200" :data="state.formData.stationBasicDtoList" border="inner">
                            <vxe-column type="seq" :width="55" title="序号"></vxe-column>
                            <vxe-column title="测点号" field="aree"></vxe-column>
                            <vxe-column title="测点名称" field="aree"></vxe-column>
                            <vxe-column title="安装地点" field="aree"></vxe-column>
                        </vxe-table>
                    </el-col>
                </el-row>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
    import list_controller from "@/components/commonCom/list_controller";
    import {
        computed,
        reactive
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import {
        getsubstationmodel,
        fileupload,
        searchgetTimeList,
        searchgetCapacityList,
        searchgetPowerTypeList
    } from '@/api/config'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()

    components: {
        list_controller
    }
    const upload = ref(null)
    let state = reactive({
        options: {
            tableheads: computed(() => table_headers.powerSupply),
            queryList: {
                dropdownUrl: '',
                querys: [],
                queryMap: new Map([
                    ['sensorTypeId', 'safety_pointType'],
                    ['deviceTypeId', 'safety_deviceType'],
                    ['alarmTypeId', 'alarmType']
                ])
            },
            dataUrl: '/power/supply/search',
            delUrl: '/power/supply/delete',
            addUrl: '/power/supply/add',
            descUrl: '/power/supply/search',
            editUrl: '/power/supply/modify',
        },
        // 表单
        addModal: false,
        modalTitle: '新增电源',
        drawerShow: false,
        formRef: null,
        formData: {},
        rules: {
            powerName: [{
                required: true,
                message: '请输入电源名称',
                trigger: 'blur'
            }],
            powerTypeName: [{
                required: true,
                message: '请输入电源类型',
                trigger: 'change'
            }],
            timeThreshold: [{
                required: true,
                message: '请选择时间门限',
                trigger: 'change'
            }],
            capacityThreshold: [{
                required: true,
                message: '请选择容量门限',
                trigger: 'change'
            }]
        },
        editId: undefined,
        PowerTypeList: [],
        TimeList: [],
        CapacityList: [],
        options1: {
            tableheads: computed(() => table_headers.quoteStation),
            queryList: {
                autoSearch: true,
                dropdownUrl: '',
                stationCode: '',
                stationTypeId: '',
                querys: [{
                    field: 'stationCode',
                    title: '编号',
                    type: 'input',
                    binddata: ''
                }],
                queryMap: new Map([
                    ['sensorTypeId', 'safety_pointType'],
                    ['deviceTypeId', 'safety_deviceType'],
                    ['alarmTypeId', 'alarmType']
                ])
            },
            dataUrl: '/substation/type/quote'
        },
    })
    // 查看按钮
    function lookBtn(row) {
        state.drawerShow = true
        axios.post(state.options.descUrl , {id:row.id}).then(res => {
            if (res.code == 200) {
                state.formData = res.data.list[0]
                state.options1.queryList.stationTypeId = res.data.id
            }
        })
    }

    function yinyonClick() {
        axios.post('/substation/type/quote', {
            stationTypeId: state.options1.queryList.stationTypeId,
            stationCode: state.options1.queryList.stationCode
        }).then(res => {
            if (res.code == 200) {
                state.formData.stationBasicDtoList = res.data.list
            }
        })
    }
    // 新增按钮
    function addBtn(row) {
        state.modalTitle = '新增电源'
        state.addModal = true
        state.formData = {}
        state.editId = undefined
    }
    // 编辑按钮
    function editBtn(row) {
        state.modalTitle = '编辑电源'
        state.addModal = true
        axios.post(state.options.descUrl ,{id:row.id}).then(res => {
            if (res.code == 200) {
                state.formData = res.data.list[0]
                state.editId = res.data.list[0].id
            }
        })
    }

    function deleteBtn(row) {
        let ids = []
        if (row != 'mul') {
            ids = [row.id]
        } else {
            if (store.records.length > 0) {
                ids = store.records.map(item => {
                    return item.id
                })
            } else {
                proxy.$modal.msgSuccess('请先勾选所要删除数据!');
            }
        }
        if (ids.length > 0) {
            axios.post(state.options.delUrl, ids).then(res => {
                if (res.code == 200) {
                    proxy.$refs['zujianname'].getData()
                    state.addModal = false
                    proxy.$modal.msgSuccess(res.msg);
                    store.records = []
                }
            })
        }

    }
    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                if (state.editId) {
                    state.formData.id = state.editId
                    axios.post(state.options.editUrl, state.formData).then(res => {
                        if (res.code == 200) {
                            proxy.$refs['zujianname'].getData()
                            state.addModal = false
                            proxy.$modal.msgSuccess(res.msg);
                        }
                    })
                } else {
                    axios.post(state.options.addUrl, state.formData).then(res => {
                        if (res.code == 200) {
                            proxy.$refs['zujianname'].getData()
                            state.addModal = false
                            proxy.$modal.msgSuccess(res.msg);
                        }
                    })
                }
            }
        })
    }

    function cancel() {
        state.addModal = false
    }
    // 获取下拉选接口
    // 时间门限
    function getselList() {
        searchgetTimeList().then(res=>{
            state.TimeList=res.data
        })
        searchgetCapacityList().then(res=>{
            state.CapacityList=res.data
        })
        searchgetPowerTypeList().then(res=>{
            state.PowerTypeList=res.data
        })
    }
    getselList()
</script>
<style lang="scss" scoped>
    ::v-deep .el-drawer {
        .querycss {
            .fsc {
                &:nth-child(2) {
                    display: none;
                }
            }
        }

        .table_box {
            .fsc {
                display: none;
            }
        }
    }
</style>